<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>danmuCanvas</title>
	</head>
	<body>
		<canvas id="danmuCanvas"></canvas>
		<!-- 保持相同的控制栏 -->
		<div>
			<input type="text" id="input" placeholder="输入弹幕内容" />
			<button id="sendDanmu" onclick="sendDanmu()">发送</button>
			<button id="togglePause" onclick="togglePause()">暂停</button>
			<button id="auto" onclick="render()">auto render</button>
		</div>

		<script>
			class CanvasDanmu {
				constructor() {
					this.canvas = document.getElementById('danmuCanvas');
					this.ctx = this.canvas.getContext('2d');
					this.danmus = [];
					this.isPaused = false;
					this.rafId = null;

					// 初始化画布
					this.resize();
					window.addEventListener('resize', () => this.resize());

					// 启动渲染循环
					this.render();
				}

				resize() {
					this.canvas.width = window.innerWidth;
					this.canvas.height = 600;
				}

				addDanmu(text, options = {}) {
					const fontSize = options.fontSize || 24;
					const speed = options.speed || 3;
					const color =
						options.color ||
						`hsl(${Math.random() * 360}, 100%, 50%)`;

					this.danmus.push({
						text,
						x: this.canvas.width,
						y: this.getTrackY(),
						width: this.ctx.measureText(text).width,
						fontSize,
						speed,
						color
					});
				}

				getTrackY() {
					const trackHeight = 40;
					const trackCount = Math.floor(
						this.canvas.height / trackHeight
					);
					return (
						Math.floor(Math.random() * trackCount) * trackHeight +
						20
					);
				}

				render() {
					if (this.isPaused) return;

					this.ctx.clearRect(
						0,
						0,
						this.canvas.width,
						this.canvas.height
					);

					this.danmus.forEach((danmu, index) => {
						if (!this.isPaused) {
							danmu.x -= danmu.speed;
						}

						this.ctx.font = `${danmu.fontSize}px sans-serif`;
						this.ctx.fillStyle = danmu.color;
						this.ctx.fillText(danmu.text, danmu.x, danmu.y);

						// 移除超出画布的弹幕
						if (danmu.x + danmu.width < 0) {
							this.danmus.splice(index, 1);
						}
					});

					this.rafId = requestAnimationFrame(() => this.render());
				}

				togglePause() {
					this.isPaused = !this.isPaused;
					if (!this.isPaused) this.render();
				}
			}

			const canvasDanmu = new CanvasDanmu();

			// 默认弹幕列表
			const dataList = [
				'测试弹幕1',
				'测试弹幕2',
				'测试弹幕3',
				'测试弹幕4',
				'测试弹幕5',
				'测试弹幕6',
				'测试弹幕7',
				'测试弹幕8',
				'测试弹幕9',
				'测试弹幕10'
			];

			// 随机从dataList中取一个弹幕
			const randomDanmu =
				dataList[Math.floor(Math.random() * dataList.length)];

			function render() {
				setInterval(() => {
					new Array(10).fill('1').forEach((item) => {
						canvasDanmu.addDanmu(randomDanmu);
					});
				}, 3000);
			}

			// 修改发送函数
			function sendDanmu() {
				const input = document.getElementById('input');
				if (input.value.trim()) {
					canvasDanmu.addDanmu(input.value.trim());
					input.value = '';
				}
			}

			// 修改暂停函数
			function togglePause() {
				canvasDanmu.togglePause();
			}
		</script>
	</body>
</html>
